<template>
  <div class="insured">
    <el-row>
      <el-button

        icon="el-icon-plus"
        
        @click="dialogVisibl = true"
      >添加</el-button>
      <el-button icon="el-icon-delete" >删除</el-button>
    </el-row>
    <el-table
       :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"  
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号" width="120">
        <template slot-scope="scope">{{ scope.row.number }}</template>
      </el-table-column>
      <el-table-column prop="formula" label="补贴公式" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="100">
        <template>
          <el-button
            type="text"
            size="small"
            @click="dialogVisible = true"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改模态框 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="补贴公式">
          <el-input v-model="inputsex" placeholder="请输入补贴公式" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增模态框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisibl"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="补贴公式">
          <el-input v-model="addinputsex" placeholder="请输入补贴公式" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibl = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseadd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      msg: '参保补贴设置',
      dialogVisible: false,
      dialogVisibl: false,
      labelPosition: 'right',
      tableData: [],
      multipleSelection: [],
      inputsex: '',
      addinputsex: ''
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClose() {
      this.$confirm('确认修改？')
        .then((_) => {
          // done();
          this.dialogVisible = false
        })
        .catch((_) => {})
    },
    handleCloseadd() {
      this.$confirm('确认增加？')
        .then((_) => {
          // done();
          this.dialogVisibl = false
        })
        .catch((_) => {})
    }
  }
}
</script>

<style scoped lang="scss">
.insured {
  box-sizing: border-box;
  padding: 30px;
  max-width: 1200px;
  .el-row {
    text-align: right;
  }
}
</style>
